<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	  *{
      margin:0;
      padding: 0;
    }
    canvas{
      display: block;
      margin:0 auto;
      border:1px red solid;
    }
	</style>
</head>
<body>
    
	<canvas id="canvas" width="800" height="600" >
     
	</canvas>
</body>
<script>
  var canvas=document.querySelector("#canvas");
  var context=canvas.getContext("2d");
  
  // ctx.fillStyle="yellow";
  // ctx.fillRect(100,100,500,400);
   

  
  function drawRoundRect(cxt,x,y,width,height,r){

    cxt.save();
    cxt.translate(x,y);
    pathRoundRect(cxt,width,height,r);
    cxt.strokeStyle="black";
    cxt.stroke();
    cxt.restore();
  }

  function pathRoundRect(cxt,x,y,width,height,r){
    cxt.beginPath();
    //右下角
    cxt.arc(width-r,height-r,r,0,Math.PI/2);
    cxt.lineTo(r,height);
    //左下角
    cxt.arc(r,height-r,r,Math.PI/2,Math.PI);
    cxt.lineTo(0,r);
    //左上角
    cxt.arc(r,r,r,Math.PI,Math.PI*3/2);
    cxt.lineTo(width-r,0);
    //右上角
    cxt.arc(width-r,r,r,Math.PI*3/2,Math.PI*2);
    cxt.closePath();
  }

  drawRoundRect(context,100,100,500,400,50);
</script>
</html>